<template>
    <view class="body-view ">
        <image style="width:370upx;height:406upx;margin-top: 20%"
               src="https://listen-book.oss-cn-beijing.aliyuncs.com/icon/logo.png" type="widthFix"></image>
        <button @getuserinfo="getUserInfo()" v-if="status===0" class='pop_btn' plain="true" open-type="getUserInfo">
            <image src="/static/img/weixin-2.svg"
                   style="width:50upx;height: 50upx;position: relative;top:10upx;margin-right:20upx">
                微信授权
        </button>
        <button class='pop_btn' plain="true" v-if="status===1" open-type='getPhoneNumber'
                @getphonenumber="getPhoneNumber">
            <image src="/static/img/weixin-2.svg"
                   style="width:50upx;height: 50upx;position: relative;top:10upx;margin-right:20upx">
                微信手机号快捷登录
        </button>

        <button class='pop_btn' @tap="goback()" style="bottom: 10%;background: none !important;" plain="true">

            暂不登录
        </button>
    </view>


</template>

<script>
  import Request from '@/utils/request.js'

  export default {
    name: "login",
    data() {
      return {
        user: {},
        status: 0, //0 需要微信授权,  1 需要手机号登录
      }
    },
    created: function () {
      uni.getProvider({
        service: 'oauth',
        success: (res) => {
          console.log(res.provider)
          if (~res.provider.indexOf('weixin')) {
            uni.login({
              provider: 'weixin',
              success: (loginRes) => {
                console.log(loginRes);
                uni.getUserInfo({
                  provider: 'weixin',
                  lang: "zh_CN",
                  success: (infoRes) => {
                    //授权过了
                    console.log('userinfo', infoRes.userInfo);
                    if (infoRes.userInfo.nickName) {
                      console.log(infoRes.userInfo);
                      this.setUser(infoRes.userInfo);
                      this.status = 1;
                    }
                  }, fail: function () {
                    console.log('失败');
                  }
                });
              }
            });
          }
        }
      });

    },
    methods: {
      setUser(userInfo) {
        this.user = userInfo;
        uni.setStorage({
          key: 'wx',
          data: userInfo
        });
      },
      getPhoneNumber(e) {
        uni.showLoading({
          'mask': true,
        });
        console.log(e);
        uni.login({
          provider: 'weixin',
          success: (loginRes) => {
            console.log(loginRes);
            Request.post('/common/wechat/session', {'code': loginRes.code}).then((res) => {
              console.log(res);
              let openid = res.data.wechat.openid;
              let session_key = res.data.wechat.session_key;
              Request.post('common/wechat/login',
                {
                  'session_key': session_key,
                  'iv': e.detail.iv,
                  'openid': openid,
                  'name': this.user.nickName,
                  'avatar': this.user.avatarUrl,
                  'encryptedData': e.detail.encryptedData,
                  'country': this.user.country,
                  'province': this.user.province,
                  'gender': this.user.gender,
                  'city': this.user.city,
                  'app_id':uni.getStorageSync('app_id')
                }).then((res) => {
                uni.hideLoading();
                console.log(res);
                uni.removeStorageSync('app_id');

                //浏览次数重置为0
                uni.setStorageSync('playNumber', 0);
                uni.setStorage({
                  key: 'token',
                  data: res.data.token,
                })
                uni.setStorage({
                  key: 'user',
                  data: res.data.user,
                })


                let url = uni.getStorageSync('redirectTo');

                if (!url)
                  url = '/pages/index/index'

                uni.removeStorageSync('redirectTo');

                uni.redirectTo({
                  'url': url,
                });

              })
            }).catch((e) => {
              // uni.p
            })
          }
        });

        console.log(e)
      },


      goback() {
        uni.removeStorageSync('user');
        uni.removeStorageSync('token');
        uni.redirectTo({
          'url': '/pages/index/index',
        });
      },
      getUserInfo() {
        uni.login({
          provider: 'weixin',
          success: (loginRes) => {
            console.log(loginRes.authResult);
            // 获取用户信息
            uni.getUserInfo({
              provider: 'weixin',
              success: (infoRes) => {
                console.log(infoRes.userInfo);
                // console.log('用户昵称为：' + infoRes.userInfo.nickName);
                this.setUser(infoRes.userInfo);
                this.status = 1;
              }, fail: function () {
                console.log('失败');
              }
            });
          }
        });
      }
    }

  }
</script>

<style lang='scss'>
    /*page {*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    display: flex;*/
    /*    flex-wrap: wrap;*/
    /*    align-items: flex-start;*/
    /*    justify-content: center;*/
    /*    background: rgba(255, 255, 255, 0);*/
    /*}*/

    .body-view {
        height: 100vh;
        width: 100vw;
        text-align: center;
        background: url(https://listen-book.oss-cn-beijing.aliyuncs.com/icon/loginbg.png);
        background-size: 100% 100%;
    }

    .pop_btn {
        background: white !important;
        border: none !important;
        width: 80%;
        height: 110 upx;
        line-height: 110 upx;
        border-radius: 80 upx;
        position: fixed;
        bottom: 20%;
        right: 10%;
        margin: auto;
    }
</style>
